<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 400px;
            height: 150px;
            background-color: black;
            margin: 0 auto;
        }   
        input{
            width: 40px;
            height: 20px;
            background-color: #fff;
            margin-top: 20px;
        }
        span{
            color: #fff;
        }
        #btn{
            width: 300px;
            height: 50px;
            background-color: #008000;
            color: #fff;
            text-align: center;
            line-height: 50px;
            margin-left: 50px;
            margin-top: 20px;
        }
        .inp1{
            margin-left: 130px;
        }
    </style>
</head>
<body>
    <div id="box">
        <input readonly="readonly" class="inp1" type="text" value="01" name="" id=""><span>分钟</span>
        <input readonly="readonly" type="text" name="" id="" value="10"><span>秒</span>
        <button id="btn">启动</button>
    </div>
</body>
<script>
    window.onload = function(){
        var box = document.querySelector('#box')
        var btn = document.querySelector('#btn')
        var s = false
        var timer = null
        btn.onclick = function() {
            if(s===false){
                timer = setInterval(updataTime,1000)
                updataTime()
                this.style.cssText = "background:red"
                this.innerHTML = "取消"
                s = true
            }else{
                clearInterval(timer)
                this.style.cssText = ""
                this.innerHTML = "启动"
                s = false
            }
            function format(a){
                return a.toString().replace(/^(\d)$/,"0$1")
            }
            function updataTime(){
                var inp = box.getElementsByTagName('input')
                var remain = inp[0].value.replace(/^0/,"")*60 +  parseInt(inp[1].value.replace(/^0/,""))
                if(remain <= 0){
                    clearInterval(timer)
                    return
                }
                remain--
                inp[0].value = format(parseInt(remain/60))
                remain %= 60
                inp[1].value = format(parseInt(remain))
            }
        }
    }
</script>
</html>